<template>
    <div class="box_alarm">
        <MoodalTitle :title="'生活垃圾控量分析'">
            <TimeTab :timeList="timeList" @timeReturnFn="timeReturnFn" />
        </MoodalTitle>
        <div style="display: flex; justify-content: space-between;">
            <!-- 左 -->
            <div class="flex">
                <div :class="activeIndex == 0 ? 'box_dl' : 'box_dl border'" @click="IndexClick(0)">同比</div>
                <div :class="activeIndex == 1 ? 'box_dl' : 'box_dl border'" @click="IndexClick(1)">环比</div>
                <div :class="activeIndex == 2 ? 'box_dl' : 'box_dl border'" @click="IndexClick(2)">趋势</div>
            </div>
            <!-- 右 -->
            <div class="flex2">
                <div :class="activeyue == 0 ? 'box_dl2' : 'box_dl2 border'" @click="activeyueIndex(0)">日</div>
                <div :class="activeyue == 1 ? 'box_dl2' : 'box_dl2 border'" @click="activeyueIndex(1)">月</div>
                <div :class="activeyue == 2 ? 'box_dl2' : 'box_dl2 border'" @click="activeyueIndex(2)">年</div>
            </div>
        </div>
        <div id="life" class="box_chart" v-show="this.activeIndex != 2"></div>
        <div id="trend" class="box_chart" v-show="this.activeIndex === 2"></div>
        
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
import { ZongHeZhztaDB } from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '时间',
                    value: 0,
                },
                {
                    title: '区划',
                    value: 1,
                },
                {
                    title: '来源',
                    value: 2,
                },
                {
                    title: '场所',
                    value: 3,
                },
            ],
            type: 0,// 时间
            activeIndex: 0, //同比
            activeyue: 0, //周
        }
    },
    mounted() {
        this.wasteContrOquantity()
    },
    methods: {
        // 同比
        IndexClick(type) {
            if (type == 0) {
                console.log(type);
                this.activeIndex = type
                this.wasteContrOquantity()
            }
            if (type == 1) {
                console.log(type);
                this.activeIndex = type
                this.wasteContrOquantity()
            }
            if (type == 2) {
                console.log(type);
                this.activeIndex = type
                this.wasteContrOquantity()
            }
        },
        // 日
        activeyueIndex(type) {
            if (type == 0) {
                console.log(type);
                this.activeyue = type
                this.wasteContrOquantity()
            }
            if (type == 1) {
                console.log(type);
                this.activeyue = type
                this.wasteContrOquantity()
            }
            if (type == 2) {
                console.log(type);
                this.activeyue = type
                this.wasteContrOquantity()
            }
        },
        functEchart(count, date, previousCount) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#life'));

            let option = {
                title: {
                    // text: '数量',
                    // color: '#ffffff',
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisTick: {
                        show: false //是否显示刻度线
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    data: date
                },
                yAxis: {
                    name: '数量',
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    axisTick: {
                        show: false //是否显示刻度线
                    },
                    splitLine: { // ‘三’形分隔线
                        show: true,
                        lineStyle: {
                            color: '#22376d'
                        },
                    }

                },
                legend: {
                    top: '5%', // 控制 板块控制器的位置
                    right: 'center',
                    // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                    // itemWidth: 10,  // 设置宽度
                    // itemHeight: 4, // 设置高度
                    itemGap: 40, // 设置两个legend之间的间距
                    data: [
                        {
                            name: '2022年',  // 这个name需要和 series 里面的 name 对应起来
                            textStyle: {
                                color: '#2DC3FB' // 单独设置某一个图列的颜色
                            }
                        },
                        {
                            name: '2023年',  // 这个name需要和 series 里面的 name 对应起来
                            textStyle: {
                                color: '#FDD43C' // 单独设置某一个图列的颜色
                            }
                        }
                    ]
                },

                series: [
                    {
                        name: '2022年',
                        type: 'bar',
                        data: previousCount,
                        itemStyle: {
                            color: '#3CFFFF',
                        },
                        barWidth: 10,
                    },
                    {
                        name: '2023年',
                        type: 'bar',
                        data: count,
                        itemStyle: {
                            color: '#FFD33C',
                        },
                        barWidth: 10,
                    },]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 折现
        functiontrend(count, date) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#trend'));

            let xData = date;
            let firstIndustry = count; //第一产业
            let option = {
                grid: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '20%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                xAxis: [

                    {
                        axisLabel: {
                            color: '#fff', // 坐标轴label文字颜色
                        },
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisTick: {
                            show: false //是否显示刻度线
                        },
                        // 坐标轴线相关设置

                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            color: '#fff', // 坐标轴label文字颜色
                        },
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 100,
                        interval: 20,
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: '#22376d'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },

                ],
                series: [
                    {
                        name: "第一产业",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        showSymbol: false,
                        itemStyle: {
                            normal: {
                                color: '#ffc600', //改变折线点的颜色
                                lineStyle: {
                                    color: '#ffc600', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },

                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 生活垃圾控量分析
        wasteContrOquantity() {
            let page = {
                dateType: this.activeyue,
                type: this.type,
                option: this.activeIndex
            }
            ZongHeZhztaDB.getLiShiKouLiang(page).then(res => {
                let count = []
                let date = []
                let previousCount = []
                console.log(res, '生活垃圾控量分析');
                if (res.code == 200) {
                    res.data.forEach(item => {
                        count.push(item.count)
                        date.push(item.date)
                        previousCount.push(item.previousCount)
                    })
                    console.log(count, date, previousCount);
                    this.functEchart(count, date, previousCount)
                    this.functiontrend(count, date)
                }
            })
        },
        timeReturnFn(val) {
            this.type = val.value
            this.wasteContrOquantity()
        },
       
    }
}

</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}

.flex {
    display: flex;
    justify-content: flex-start;
}

.flex2 {
    display: flex;
}

.box_dl {
    margin-left: 1.5rem;
    margin-top: 1rem;
    width: 6rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    background: #1F4987;
    color: #fff;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 1px solid #00D6FB;
}

.border {
    opacity: 0.6 !important;
}

.box_dl2 {
    margin-left: 1.5rem;
    margin-top: 1rem;
    width: 3rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    background: #1F4987;
    color: #fff;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 1px solid #00D6FB;
}

.box_chart {
    width: 45rem;
    height: 40rem;
}
</style>